<template>
  <div class="">
    <heads>
      <template v-slot:head>
        <h1>首页</h1>
      </template>
      <template v-slot:con>
        <h1>内容</h1>
      </template>
    </heads>

    <!-- <child :msg="msg" msg1="msg" @aa="fun1" /> -->

    <add @adds="adds" />

    <list :list="list" />
  </div>
</template>

<script>
import heads from "../components/Header.vue";
import child from "../components/Child.vue";
import list from "../components/List.vue";
import add from "../components/Add.vue";
import fenlei from "../../public/fenlei.json";
export default {
  data() {
    return {
      msg: "这是父组件page里的msg数据",
      list: [
        {
          title: "商品1",
          price: 100,
          img: "01.jpg",
        },
        {
          title: "商品2",
          price: 200,
          img: "01.jpg",
        },
        {
          title: "商品3",
          price: 300,
          img: "01.jpg",
        },
        {
          title: "商品4",
          price: 400,
          img: "01.jpg",
        },
      ],
      fromson: "",
      fenlei: fenlei.result,
    };
  },
  mounted() {},
  methods: {
    fun1(a) {
      console.log("这是父组件的方法");
      console.log(a);
      this.fromson = a;
    },
    adds(a) {
      this.list.push({ title: a, price: 100, img: "01.jpg" });
    },
  },
  components: {
    heads,
    child,
    list,
    add,
  },
};
//子组件的使用步骤
// 1.先定义子组件 在components文件夹下定义
// 2.引入 子组件 在哪个页面使用就在哪个页面引入
// 3.注册子组件 使用components选项注册
// 4.使用子组件  作为标签使用
</script>

<style lang="scss"></style>
